import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
  render() {
    const {userList,isFirst,isLoading,err} = this.props
    return (
      <div className="row">
          {
            isFirst ? <h2>欢迎使用!!!!!</h2> :
            isLoading ? <h2>Loading!</h2> :
            err ? <h2 style={{color:'red'}}>{err}</h2> :
            userList.map((user)=>{
              return(
                <div className="card" key={user.id}>
                  <a href={user.url} target="_blank" rel="noreferrer">
                    <img alt="head_protrait" src={user.avatar_url} style={{width:'100px'}}/>
                  </a>
                  <p className="card-text">{user.login}</p>
                </div>
              )
            })
          }
       </div>
    )
  }
}
